<template>
  <div class="recommend-wrapper" ref="recommend">
    <scroll class="scroll-wrap" :data="recommendList" ref="scroll">
      <div>
        <!-- 轮播图 -->
        <div class="banner-wrapper">
          <swiper
            :options="swiperOption"
            v-if="slider.length"
            >
            <!-- slides -->
            <swiper-slide  v-for="item in slider" :key="item.id">
              <a :href="item.linkUrl">
                <img
                  class="banner-img"
                  :src="item.picUrl"
                  />
              </a>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>
        <!-- 推荐歌单列表 -->
        <div class="recommend-list-wrapper">
          <div class="title">热门歌单推荐</div>
            <ul class="recommend-list">
              <li
                class="recommend-item"
                v-for="item in recommendList"
                :key="item.content_id"
                @click="handleItemClick(item)"
                >
                <div class="img-wrap">
                  <img
                    v-lazy="item.cover"
                    />
                </div>
                <div class="item-info">
                  <div class="info-title">{{item.username}}</div>
                  <div class="info-desc">{{item.title}}</div>
                </div>
              </li>
            </ul>
        </div>
      </div>
      <loading v-show="!recommendList.length" />
    </scroll>
    <slide>
      <router-view></router-view>
    </slide>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { getSlideList, getRecommendList } from 'api'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import Slide from 'base/slide/slide'
import { playlistMixin } from 'common/js/mixin'

export default {
  name: 'recommend',
  mixins: [ playlistMixin ],
  components: {
    Scroll,
    Loading,
    Slide
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 4000,
        observer: true,
        observeParents: true
      },
      slider: [],
      recommendList: []
    }
  },
  created () {
    this._getSlideData()
    this._getRecommendList()
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    handleItemClick (item) {
      this.$router.push({
        path: `/recommend/${item.content_id}`
      })
      this.setDisc(item)
    },
    _getSlideData () {
      getSlideList().then((data) => {
        // console.log(data)
        this.slider = data.slider
      })
    },
    _getRecommendList () {
      getRecommendList().then((data) => {
        // console.log(data)
        this.recommendList = data.v_hot
      })
    },
    ...mapMutations({
      setDisc: 'SET_DISC'
    })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .recommend-wrapper {
    position: absolute
    top: 76px
    right: 0
    bottom: 0
    left: 0
    overflow: hidden
    .scroll-wrap {
      height: 100%
    }
    .banner-wrapper {
      overflow: hidden
      width: 100%
      padding-bottom: 40%
      height: 0
      background: #eee
      >>> .swiper-pagination-bullet {
        background: $color-text
      }
      >>> .swiper-pagination-bullet-active {
        width: 16px
        border-radius: 8px
      }
      .banner-img {
        width: 100%
      }
    }
    .recommend-list-wrapper {
      .title {
        height: 52px
        line-height: 52px
        font-size: $font-size-small
        text-align: center
        color: $color-theme
      }
      .recommend-list {
        .recommend-item {
          display: flex
          padding: 0 15px
          // margin-bottom: 16px
          padding-bottom: 16px
          .img-wrap {
            width: 50px
            height: 50px
            background: #eee
            img {
              width: 100%
            }
          }
          .item-info {
            flex: 1
            margin-left: 16px
            font-size: $font-size-small
            div {
              line-height: 25px
              &.info-desc {
                color: $color-text-d
              }
            }
          }
        }

      }
    }
  }
</style>
